<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-08-05 15:05:41
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-09-22 14:02:36
-->
<template>
  <div class="container">
    <secen-view @already="already"></secen-view>
    <div class="list">
      <ul>
        <li @click="addEntity">添加plane实体</li>
        <li @click="addCZML">加载动态数据格式CZML小汽车移动</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "DataQuery",
  data() {
    return {
      viewer: "",
      entity: "",
    };
  },
  methods: {
    already(viewer) {
      this.viewer = viewer;
    },
    addEntity() {
      this.entity = this.viewer.entities.add({
        id: "plane",
        position: new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0),
        // 获取或设置平面
        plane: {
          //  plane获取或设置平面属性，指定平面的法线和距离。
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
          dimensions: new Cesium.Cartesian2(400, 300),
          material: "./data/images/cat2.jpg",
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
        // 用于设置选定对象的显示信息
        // 可以直接使用HTML标签
        description: `<div>
      <h3>CESIUM</h3>
    </div>`,
      });
      this.viewer.flyTo(this.entity);
      this.handlerLeftClick();
    },
    // 左点击监听
    handlerLeftClick() {
      let that = this;
      let handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );
      handler.setInputAction(function (movement) {
        let pick = that.viewer.scene.pick(movement.position);
        // 判断一下是否获取到
        if (Cesium.defined(pick) && pick.id.id === "plane") {
          alert("点击了图片");
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    addCZML() {
      let that = this;
      let viewer = this.viewer;

      viewer.camera.setView({
        destination: new Cesium.Cartesian3(
          1216403.8845586285,
          -4736357.493351395,
          4081299.715698949
        ),
        orientation: new Cesium.HeadingPitchRoll(
          4.2892217081808806,
          -0.4799070147502502,
          6.279789177843313
        ),
        // endTransform表示相机参考框架的变换矩阵。
        // Cesium.Matrix4.IDENTITY初始化为单位矩阵的不可变 Matrix4 实例。
        endTransform: Cesium.Matrix4.IDENTITY,
      });
      this.viewer.dataSources
        .add(Cesium.CzmlDataSource.load("./data/ClampToGround.czml"))
        .then(function (dataSource) {
          that.entity = dataSource.entities.getById("CesiumMilkTruck");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  .list {
    position: absolute;
    top: 1rem;
    ul {
      color: rgb(248, 240, 92);
      li {
        background: rgb(144, 213, 248);
        margin: 0.3rem;
        padding: 0.5rem;
      }
    }
  }
}
</style>
